<template>
  <div
    class="node-item"
    ref="node"
    :class="[isActive || isSelected ? 'active' : '']"
    :style="flowNodeContainer"
    v-click-outside="setNotActive"
    @click="setActive"
    @mouseenter="showAnchor"
    @mouseleave="hideAnchor"
    @dblclick.prevent="editNode"
    @contextmenu.prevent="onContextmenu"
  >
    <div class="log-wrap" style="display: flex">
      <div style="height: 100%; width: 5px; background: #2b85e4"></div>
      <img :src="node.logImg" alt="" />
    </div>
    <div class="nodeName">{{ node.nodeName }}</div>
    <!--连线用--//触发连线的区域-->
    <div class="node-anchor anchor-top" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-left" v-show="mouseEnter"></div>

    <Modal
      v-model="datashaixaunModel"
      title="数据筛选"
      @on-ok="okdatashaixaunModel"
      @on-cancel="canceldatashaixaunModel"
    >
      <div>
        <div style="margin: 10px 0">
          <Button type="primary">更多条件</Button>
        </div>
        <div style="margin: 10px 0 10px 70px">
          <Select
            v-model="datashaixaunModelmodel1"
            style="width: 160px; margin: 0 5px"
          >
            <Option
              v-for="item in datashaixaunModelList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Select
            v-model="datashaixaunModelmodel2"
            style="width: 100px; margin: 0 5px"
          >
            <Option
              v-for="item in datashaixaunModelList2"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Input
            v-model="datashaixaunModelmodel3"
            placeholder="请输入"
            style="width: 100px; margin: 0 5px"
          />
        </div>
        <div style="margin: 10px 0">
          <Select v-model="qieOrHuomodel" style="width: 60px; margin: 0 5px">
            <Option
              v-for="item in qieOrHuoList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Select
            v-model="datashaixaunModelmodel4"
            style="width: 160px; margin: 0 5px"
          >
            <Option
              v-for="item in datashaixaunModelList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Select
            v-model="datashaixaunModelmodel5"
            style="width: 100px; margin: 0 5px"
          >
            <Option
              v-for="item in datashaixaunModelList2"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
          <Input
            v-model="datashaixaunModelmodel6"
            placeholder="请输入"
            style="width: 100px; margin: 0 5px"
          />
        </div>
      </div>
    </Modal>
    <Modal
      v-model="duobiaomodal"
      title="多表关联"
      @on-ok="okduobiao"
      @on-cancel="cancelduobiao"
    >
      <div>
        <div>关联字段</div>
        <div>
          <Select
            v-model="gaunlianziduanModelmodel1"
            style="width: 160px; margin: 0 5px"
          >
            <Option
              v-for="item in datashaixaunModelList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </div>
      </div>
    </Modal>
    <Modal v-model="fenzumodals" title="分组汇总" :footer-hide="false">
      <div slot="footer" style="margin: 0px 10px">
        <Button @click="cancelfenzu">取消</Button>
        <Poptip
          confirm
          placement="left"
          title="请确认输入字段均为可用变量"
          @on-ok="okfenzu"
          @on-cancel="cancelfenzu"
        >
          <Button type="primary" style="margin-left: 5px">确定</Button>
        </Poptip>
      </div>
      <div>
        <div style="margin:10px 0">
          <Button type="primary" style="margin-left: 5px" @click="handleToAdd(1)">+</Button>
          <Button type="primary" style="margin-left: 5px" @click="handleToAdd(2)">-</Button>
          <Button type="primary" style="margin-left: 5px" @click="handleToAdd(3)">*</Button>
          <Button type="primary" style="margin-left: 5px" @click="handleToAdd(4)">/</Button>
          <Button type="primary" style="margin-left: 5px" @click="handleToAdd(5)">(</Button>
          <Button type="primary" style="margin-left: 5px" @click="handleToAdd(6)">)</Button>
        </div>
        <Input
          v-model="fenzuValue"
          maxlength="100"
          show-word-limit
          type="textarea"
          placeholder="Enter something..."
          style="width: 480px"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import ClickOutside from "vue-click-outside";
export default {
  name: "nodeItem",
  props: {
    node: Object,
  },
  directives: {
    ClickOutside,
  },
  computed: {
    // 节点容器样式
    flowNodeContainer: {
      get() {
        return {
          top: this.node.top,
          left: this.node.left,
        };
      },
    },
  },
  data() {
    return {
      mouseEnter: false,
      isActive: false,
      isSelected: false,
      datashaixaunModel: false,
      duobiaomodal: false,
      fenzumodals: false,
      fenzuValue: "",
      datashaixaunModelmodel1: "",
      gaunlianziduanModelmodel1:"年度净入库税收合计",
      datashaixaunModelList: [
        {
          value: "年度净入库税收合计",
          label: "年度净入库税收合计",
        },
        {
          value: "工业增加值",
          label: "工业增加值",
        },
        {
          value: "研发经费支出",
          label: "研发经费支出",
        },
        {
          value: "用地面积",
          label: "用地面积",
        },
        {
          value: "主要污染物排放量",
          label: "主要污染物排放量",
        },
        {
          value: "营业收入",
          label: "营业收入",
        },
        {
          value: "年平均职工人数",
          label: "年平均职工人数",
        },
      ],
      datashaixaunModelmodel2: "",
      datashaixaunModelList2: [
        {
          value: "等于",
          label: "等于",
        },
        {
          value: "不等于",
          label: "不等于",
        },
        {
          value: "大于",
          label: "大于",
        },
        {
          value: "大于等于",
          label: "大于等于",
        },
        {
          value: "小于",
          label: "小于",
        },
        {
          value: "小于等于",
          label: "小于等于",
        },
        {
          value: "选择范围",
          label: "选择范围",
        },
        {
          value: "为空",
          label: "为空",
        },
        {
          value: "不为空",
          label: "不为空",
        },
      ],
      datashaixaunModelmodel3: "",
      qieOrHuomodel: "且",
      qieOrHuoList: [
        {
          value: "且",
          label: "且",
        },
        {
          value: "或",
          label: "或",
        },
      ],
      datashaixaunModelmodel4: "",
      datashaixaunModelmodel5: "",
      datashaixaunModelmodel6: "",
      moreTableModel: false,
      fenzuModel: false,
    };
  },
  methods: {
    ...mapActions(["deleteCalculationProcessArr","addCalculationProcessArr","getCalculationProcessData"]),
    showAnchor() {
      this.mouseEnter = true;
    },
    hideAnchor() {
      this.mouseEnter = false;
    },
    onContextmenu(event) {
      this.$contextmenu.destroy();
      this.$contextmenu({
        items: [
          {
            label: "删除",
            disabled: false,
            icon: "",
            onClick: () => {
              this.deleteNode();
            },
          },
        ],
        event,
        customClass: "custom-class",
        zIndex: 9999,
        minWidth: 180,
      });
       return false;
    },
    setActive() {
      if (window.event.ctrlKey) {
        this.isSelected = !this.isSelected;
        return false;
      }
      this.isActive = true;
      this.isSelected = false;
      setTimeout(() => {
        this.$emit("changeLineState", this.node.id, true);
      }, 0);
    },
    setNotActive() {
      if (!window.event.ctrlKey) {
        this.isSelected = false;
      }
      if (!this.isActive) {
        return;
      }
      this.$emit("changeLineState", this.node.id, false);
      this.isActive = false;
    },
    editNode() {
      console.log("___我是编辑__", this.node);
      // this.$store.state.dataFactory.ListAllData;
      this.newNodeName = this.node.nodeName;
      if (this.node.typeName == "输入") {
        let inputValue = "";
        if (
          this.$store.state.dataFactory.modelData[this.node.id] != undefined
        ) {
          inputValue = this.$store.state.dataFactory.modelData[this.node.id];
        }

        this.$Modal.confirm({
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  style:
                    "margin-bottom:20px;vertical-align: middle;font-size: 16px;color: #17233d;border-bottom:1px s0lid #ccc",
                },
                "载入数据源"
              ),
              h(
                "Select",
                {
                  props: {
                    value: inputValue, //绑定数据
                    transfer: true, //不受表格高度影响
                  },
                  on: {
                    "on-change": (event) => {
                      inputValue = event;
                    },
                  },
                },
                [
                  h(
                    "Option",
                    {
                      props: {
                        value: "亩均数据",
                      },
                    },
                    "亩均数据"
                  ),
                  h(
                    "Option",
                    {
                      props: {
                        value: "企业数据",
                      },
                    },
                    "企业数据"
                  ),
                  h(
                    "Option",
                    {
                      props: {
                        value: "税务数据",
                      },
                    },
                    "税务数据"
                  ),
                  h(
                    "Option",
                    {
                      props: {
                        value: "企业指标核算基础数据",
                      },
                    },
                    "企业指标核算基础数据"
                  ),
                ]
              ),
            ]);
          },
          onOk: () => {
            console.log("确定————————", inputValue);
            this.$store.state.dataFactory.modelData[this.node.id] = inputValue;
            this.$emit("setNodeName", this.node.id, inputValue);
          },
        });
      } else if (this.node.typeName == "数据筛选") {
        this.getCalculationProcessData({
          id:this.node.id,
        }).then(res=>{
          if(res.data.value != ""){
            
            let arr = res.data.value.split(" ");
            this.datashaixaunModelmodel1 = arr[1];
            this.datashaixaunModelmodel2 = arr[2]
            this.datashaixaunModelmodel3 = arr[3]
            this.qieOrHuomodel = arr[4]
            this.datashaixaunModelmodel4 = arr[5]
            this.datashaixaunModelmodel5 = arr[6]
            this.datashaixaunModelmodel6 = arr[7]
            console.log("__res__",arr,res.data.value)
          }else{
            this.datashaixaunModelmodel1 = "";
            this.datashaixaunModelmodel2 = "";
            this.datashaixaunModelmodel3 = "";
            this.qieOrHuomodel = "";
            this.datashaixaunModelmodel4 = "";
            this.datashaixaunModelmodel5 = "";
            this.datashaixaunModelmodel6 = "";

          }
          
          
        })
        this.datashaixaunModel = true;
      } else if (this.node.typeName == "多表关联") {
        this.duobiaomodal = true;
      } else if (this.node.typeName == "分组汇总") {
        this.getCalculationProcessData({
          id:this.node.id,
        }).then(res=>{
          if(res.data.value != ""){
            this.fenzuValue = res.data.value;
          }else{
            this.fenzuValue = "";
          }
          console.log("__res__",res)
        })
        this.fenzumodals = true;
      } else {
        this.$Modal.confirm({
          render: (h) => {
            return h("div", [
              h(
                "div",
                {
                  style:
                    "margin-bottom:20px;vertical-align: middle;font-size: 16px;color: #17233d;border-bottom:1px s0lid #ccc",
                },
                "编辑"
              ),
              h("Input", {
                props: {
                  value: this.newNodeName,
                  autofocus: true,
                },
                on: {
                  input: (val) => {
                    this.newNodeName = val;
                  },
                },
              }),
            ]);
          },
          onOk: () => {
            console.log(this.newNodeName);
            this.$emit("setNodeName", this.node.id, this.newNodeName);
          },
        });
      }
    },
    okdatashaixaunModel() {
      this.addCalculationProcessArr({
        id:this.node.id,
        value:`数据筛选： ${this.datashaixaunModelmodel1} ${this.datashaixaunModelmodel2} ${this.datashaixaunModelmodel3} ${this.qieOrHuomodel} ${this.datashaixaunModelmodel4} ${this.datashaixaunModelmodel5} ${this.datashaixaunModelmodel6}`
      })
      this.datashaixaunModel = false;
    },
    canceldatashaixaunModel() {
      this.datashaixaunModel = false;
    },
    okduobiao() {
      this.duobiaomodal = false;
    },
    cancelduobiao() {
      this.duobiaomodal = false;
    },
    okfenzu() {
      console.log(this.node)
      this.addCalculationProcessArr({
        id:this.node.id,
        value:`分组汇总：${this.fenzuValue}`
      })

      this.fenzumodals = false;
    },
    cancelfenzu() {
      this.fenzumodals = false;
    },
    deleteNode() {
      console.log(`删除_`,this.node);
      this.deleteCalculationProcessArr(this.node.id);
      this.$emit("deleteNode", this.node);
    },
    handleToAdd(event){
      if(event === 1){
        this.fenzuValue = this.fenzuValue + "+";
      }else if(event === 2){
        this.fenzuValue = this.fenzuValue + "-";
      }else if(event === 3){
        this.fenzuValue = this.fenzuValue + "*";
      }else if(event === 4){
        this.fenzuValue = this.fenzuValue + "/";
      }else if(event === 5){
        this.fenzuValue = this.fenzuValue + "(";
      }else if(event === 6){
        this.fenzuValue = this.fenzuValue + ")";
      }
    }
  },
};
</script>

<style lang="less" scoped>
@labelColor: #409eff;
@nodeSize: 20px;
@viewSize: 10px;
.node-item {
  background: white;
  position: absolute;
  display: flex;
  height: 40px;
  width: 160px;
  justify-content: center;
  align-items: center;
  border: 1px solid #b7b6b6;
  border-radius: 4px;
  cursor: move;
  box-sizing: content-box;
  z-index: 9995;
  &:hover {
    z-index: 9998;
    .delete-btn {
      display: block;
    }
  }
  .log-wrap {
    width: 45px;
    height: 40px;
    border-right: 1px solid #b7b6b6;
  }
  .nodeName {
    flex-grow: 1;
    width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 5px;
  }
  .node-anchor {
    display: flex;
    position: absolute;
    width: @nodeSize;
    height: @nodeSize;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: crosshair;
    z-index: 9999;
    background: -webkit-radial-gradient(#8ed3f3 10%, #7eaefa 30%, #8ed3f3 60%);
    // background: linear-gradient(to right, #a1c4fd 20%, #c2e9fb 100%);
  }
  .anchor-top {
    top: calc((@nodeSize / 2) * -1);
    left: 50%;
    margin-left: calc((@nodeSize / 2) * -1);
  }
  .anchor-right {
    top: 50%;
    right: calc((@nodeSize / 2) * -1);
    margin-top: calc((@nodeSize / 2) * -1);
  }
  .anchor-bottom {
    bottom: calc((@nodeSize / 2) * -1);
    left: 50%;
    margin-left: calc((@nodeSize / 2) * -1);
  }
  .anchor-left {
    top: 50%;
    left: calc((@nodeSize / 2) * -1);
    margin-top: calc((@nodeSize / 2) * -1);
  }
}
.active {
  border: 1px dashed @labelColor;
  box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.5);
}
</style>
<style >
.ivu-poptip-confirm .ivu-poptip-body .ivu-icon {
  position: revert !important;
  float: left;
}
</style>